<template>
    <my-dialog 
    v-model="model"
    width="580px"
    >
        <div class="tip">
            营业执照、法人证件照等有关公司资质用途的图片，请选择上传格式，之后制作投标文件使用是会有提醒功能，防止因图片不当引起废标
        </div>

        <div class="type">
            <el-radio-group 
            v-model="typecode" 
            :disabled="data.rowguid"
            class="type-radio"
            >
                <el-radio 
                v-for="(item, index) in radioOpt"
                :key="index"
                :label="item.key"
                @click.native.prevent.stop="beforeShift(item)"
                >
                    {{item.value}}
                </el-radio>
            </el-radio-group>
        </div>

        <component 
            ref="com"
            v-if="model"
            :key="typecode"
            :is="`form-${typecode}`" 
            :type="typecode"
            :data="data"
            @close="closeHandler"
        ></component>
    </my-dialog>
</template>

<script>
import FormYyzz from './form-yyzz.vue';
import FormFrzjz from './form-frzjz.vue';
import FormYgzzz from './form-ygzzz.vue';
import FormQt from './form-qt.vue';

export default {
    components: {
        FormYyzz,
        FormFrzjz,
        FormYgzzz,
        FormQt,
    },
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            typecode: 'qt',

            form: {
                filename: '',
                fileguid: '',
            },

            radioOpt: [
                {key:'yyzz', value:'上传营业执照'}, 
                {key:'frzjz', value:'上传法人证件照'}, 
                {key:'ygzzz', value:'上传员工资质照'}, 
                {key:'qt', value:'其他'},
            ],
        };
    },
    computed: {
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
    },
    watch: {
        data: {
            handler() {
                this.typecode = this.data.typecode || 'qt';
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        closeHandler() {
            this.model = false;
            this.$emit('reload');
        },
        beforeShift(item) {
            if (this.$refs.com.fileExist()) {
                showConfirm('切换类型将移除您已上传的附件内容，是否继续？', 'warning', () => {
                    this.typecode = item.key;
                });

                return;
            }

            this.typecode = item.key;
        },
    },
    mounted() {
        
    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .tip {
        color: $warningColor;
        margin-bottom: 16px;
    }

    .type {
        margin-bottom: 16px;

        ::v-deep{
            .el-radio{
                margin-top: 8px;
                margin-bottom: 8px;
            }
        }
    }

    .type-radio{
        ::v-deep{
            .el-radio{
                margin-right:20px;
            }

            .el-radio__label{
                padding-left: 8px;
            }
        }
    }
</style>